<script setup>
import {ref, computed} from "vue";
import {post} from "@/request/request";
import {onShow} from '@dcloudio/uni-app';

const addressInfo = ref({})
addressInfo.value = uni.getStorageSync('address');
const goods = ref({})
goods.value = uni.getStorageSync('goods')
const goodsItsems = ref({})


const data = goods.value.number
console.log('data', data);

const backClick = () => {
  uni.navigateBack();
};

const totalPrice = computed(() => goods.value.number * goodsItsems.value.product_price);
console.log('totalPrice', totalPrice);

onShow(() => {
  goodsItem()
})
const goodsItem = () => {
  post('productIdSearch', {product_id: goods.value.id}
  ).then(res => {
    const {data} = res;
    console.log('goodsItem', data);
    goodsItsems.value = data;
  })
}

const payClick = () => {
  post('mineWechatPay', {
    product_price: totalPrice.value,
    product_id: goods.value.id,
    address_id: addressInfo.value.id,
    purchase_quantity: goods.value.number
  }).then(res => {
    const {data} = res;
    const product_id = data.product_id;
    console.log('requestPayment', data)
    uni.requestPayment({
      provider: 'wxpay',
      timeStamp: data.timeStamp,
      nonceStr: data.nonceStr,
      package: data.package,
      signType: data.signType,
      paySign: data.paySign,
      success: function (res) {
        console.log('success:支付成功' + JSON.stringify(res));
        setTimeout(() => {
          uni.navigateTo({
            url: '/pages/pay/components/pay-order?product_id=' + product_id
          })
        }, 500)
      },
      fail: function (err) {
        console.log('fail:支付失败' + JSON.stringify(err));
      }
    })
  })
}

//分享
const onShareAppMessage = (res) => {
  if (res.from === "button") {
  }
  return {
    title: "ئەڭ ئىسىل مەھسۇلات بىزدە",
    path: "/pages/home/home",
  };
};
</script>
<template>
  <uv-navbar :fixed="true" :placeholder="true" @leftClick="backClick" title="پۇل تۆلەش">
    <template v-slot:left>
      <view class="uv-nav-slot" @click="open">
        <image src="/static/search/arrow-left.svg"/>
      </view>
    </template>
  </uv-navbar>
  <view class="pay">
    <view class="adsress">
      <view class="name-tel">
        <view>{{ addressInfo.ad_recipient_name }}</view>
        <view>TEL:{{ addressInfo.ad_phone_number }}</view>
      </view>
      <view class="name-tel">
        <image src="/static/position.svg"/>
        <view style="font-size: 24rpx;color: #111;">{{ addressInfo.ad_street_address }}</view>
      </view>
    </view>
    <view class="goods-item">
      <image :src="goodsItsems.product_image"/>
      <view class="goods-name">
        <view>{{ goodsItsems.product_name }}</view>
        <view class="price">
          <view style="font-size: 40rpx;color: #FF9385;">{{ goodsItsems.product_price }}¥</view>
          <view style="font-size: 28rpx;color: #111;">X{{ goods.number }}</view>
        </view>
      </view>
    </view>
    <view class="pay-btn-box">
      <button class="pay-btn" @click="payClick">پۇل تۆلەش</button>
      <view class="pay-price">
        <view>(تال {{ goods.number }})</view>
        <view style="font-size: 40rpx;color: #111111">{{ totalPrice }}￥</view>
      </view>
    </view>
  </view>
</template>
<style lang="scss" scoped>
@mixin flex($direction: row) {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: $direction;
}

.uv-nav-slot {
  @include flex;
  align-items: center;
  justify-content: space-between;
  border-width: 1rpx;
  border-radius: 200rpx;
  border-color: #dadbde;
  padding: 6rpx 14rpx;
  opacity: 0.8;

  image {
    height: 28rpx;
    width: 22rpx;
  }
}

.pay {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  .adsress {
    margin: 20rpx;
    width: 690rpx;
    height: 194rpx;
    background: #FFF8EE;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;

    .name-tel {
      width: 80%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .goods-item {
    margin: 20rpx;
    width: 690rpx;
    height: 194rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.1);

    image {
      width: 176rpx;
      height: 163rpx;
      border-radius: 20rpx;
    }

    .goods-name {
      width: 474rpx;
      height: 112rpx;
      display: flex;
      // align-items: center;
      justify-content: space-around;
      flex-direction: column;

      .price {
        width: 90%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }

  .pay-btn-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 166rpx;
    padding-bottom: env(safe-area-inset-bottom);
    background: #FFFFFF;
    box-shadow: 0 0 8rpx 0 rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-around;

    .pay-btn {
      width: 430rpx;
      height: 84rpx;
      background: #43A833;
      color: #FFFFFF;
    }

    .pay-price {
      width: 238rpx;
      height: 38rpx;
      display: flex;
      align-items: center;
      justify-content: space-evenly;
    }
  }
}

button::after {
  border: none;
}
</style>